<template>
  <div class="edit-container">
    <van-nav-bar
        title="编辑资料"
        left-text="返回"
        right-text="完成"
        left-arrow
        @click-left="onClickLeft"
        @click-right="onClickRight"
    />
    <van-cell-group>
      <van-field v-model="name" label="昵称" placeholder="请输入昵称" />
    </van-cell-group>
    <van-cell title="生日" :value="date" @click="show = true" />
    <van-calendar v-model="show" :show-confirm="false"  @confirm="onConfirm" :min-date="new Date('1990-01-01')" />

  </div>
</template>

<script>
import {Notify} from 'vant';
import {mapState} from 'vuex'
import bus from "@/EventBus";

export default {
  name: "Edit",
  data(){
    return{
      show: false,
      name: this.$store.state.name,
      date: this.$store.state.date
    }
  },
  methods:{
    onClickLeft(){
      // go(-1) 表示后退一层
      this.$router.go(-1)
    },
    onClickRight(){
      // 点击完成事件
      this.$router.push('/home/User')
      Notify({type: 'success', message: '编辑成功!'});
      console.log(this.name)
      console.log(this.date)
      this.$store.commit('EDIT_NAME',this.name)
      this.$store.commit('EDIT_DATE',this.date)
      // bus.$emit('show',this.obj)
    },

    formatDate(date) {
      return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
    },
    onConfirm(date) {
      this.show = false;
      this.date = this.formatDate(date);
    },
  },



}
</script>

<style lang="less" scoped>
// 解决头部底部置顶置底遮住元素的问题
.edit-container{
  .van-nav-bar{
    background-color: #007bff;
  }
  /deep/.van-nav-bar__title{
    color: white;
  }
  /deep/.van-nav-bar__arrow{
    color: white;
  }
  /deep/.van-nav-bar__text{
    color: white;
  }
}
</style>